﻿<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="订单查询" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>
        <view class="coreshop-padding-top-10 coreshop-padding-bottom-10 coreshop-padding-left-15 coreshop-padding-right-15 coreshop-margin-bottom-5 coreshop-bg-white" v-bind:class="coreshopdata.parameters.style">
            <u-search placeholder="请输订单号、收货人手机号、收货人姓名" v-model="keyword" shape="square" :show-action="true" action-text="搜索" @custom="goSearch" @search="goSearch"></u-search>
        </view>

        <!-- 订单列表 -->
        <view class="order-list" v-for="order in storeOrderList" :key="order.orderId" @tap.stop="goOrderDetail(order.orderId)">
            <view class="order-head coreshop-flex coreshop-justify-between coreshop-align-center">
                <text class="no">
                    编号：{{ order.orderId }}
                </text>
                <text class="state">{{ order.shipStatusText }}</text>
                <view class="coreshop-width-fit-content">
                    <u-button type="primary" size="mini" v-if="order.receiptType==1">物流快递</u-button>
                    <u-button type="success" size="mini" v-if="order.receiptType==2">同城配送</u-button>
                    <u-button type="warning" size="mini" v-if="order.receiptType==3">门店自提</u-button>
                </view>
            </view>
            <view class="goods-order" v-for="item in order.items" :key="item.id">
                <view class="order-content">
                    <view class="goods-box coreshop-flex coreshop-align-start">
                        <view class="order-goods__tag">
                            <image v-if="detail.activity_type" class="tag-img" :src="orderStatus[detail.activity_type]" mode=""></image>
                            <image v-if="orderType === 'score'" class="tag-img" :src="orderStatus[orderType]" mode=""></image>
                        </view>
                        <image class="goods-img" :src="item.imageUrl || ''" mode="aspectFill"></image>
                        <view class="coreshop-flex coreshop-flex-direction coreshop-align-start">
                            <view class="goods-title more-t u-line-2">{{ item.name || '' }}</view>
                            <view class="order-tip one-t">
                                <text class="order-num">数量:{{ item.nums || 0 }};</text>
                                {{ item.addon ? item.addon : '' }}
                            </view>
                            <view class="order-goods coreshop-flex coreshop-align-center ">
                                <text class="order-price">￥{{ item.amount || 0 }}</text>
                                <!--<button class="cu-btn status-btn" v-if="detail.status_name">{{ item.status_name }}</button>-->
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="order-bottom coreshop-flex coreshop-justify-between coreshop-solid-bottom coreshop-align-center">
                <text class="coreshop-font-12 tips-color">{{$u.timeFormat(order.createTime, 'yyyy-mm-dd hh:MM:ss')}}</text>
                <text class="coreshop-font-12 tips-color">{{ order.shipName }}【{{ order.shipMobile }}】</text>
            </view>

            <view class="order-bottom coreshop-flex coreshop-justify-between coreshop-align-center">
                <view v-if="order.status === 1">
                    <u-button type="success" size="mini">订单正常</u-button>
                </view>
                <view v-else-if="order.status === 2">
                    <u-button type="primary" size="mini">订单完成</u-button>
                </view>
                <view v-else-if="order.status === 3">
                    <u-button size="mini">订单取消</u-button>
                </view>
                <view v-else></view>
                <view>
                    <text class="coreshop-font-12">{{ order.payStatusText }}</text>
                    <text class="coreshop-font-12" v-if="order.paymentCodeText">【{{order.paymentCodeText}}】</text>
                </view>
                <view>
                    <text class="total-price-title">实付款：</text>
                    <text class="total-price">{{ order.payedAmount }}</text>
                </view>
            </view>
        </view>

        <!-- 无数据时默认显示 -->
        <view class="coreshop-emptybox" v-if="storeOrderList.length<=0">
            <u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="当前时间暂无订单数据" mode="list"></u-empty>
        </view>

        <!-- 更多 -->
        <u-loadmore v-if="storeOrderList.length" height="40px" :status="loadStatus" icon-type="flower" color="#ccc" />
    </view>
</template>

<script>
    import { mapMutations, mapActions, mapState } from 'vuex';
    export default {
        components: {},
        data() {
            return {
                keyword: '',
                storeOrderList: [], //订单商品列表
                loadStatus: this.$globalConstVars.loadStatus.loadMore, //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
                currentPage: 1,
                lastPage: 1,
                storeId: 0,
            }
        },
        onLoad(options) {
            this.keyword = options.keyword;
            this.storeId = options.storeId;
            if (this.keyword) {
                this.getStoreOrder();
            }
        },
        onPullDownRefresh() {
            this.storeOrderList = [];
            this.currentPage = 1;
            if (this.keyword) {
                this.getStoreOrder();
            }
        },
        onReachBottom() {
            if (this.currentPage < this.lastPage) {
                this.currentPage += 1;
                this.getStoreOrder();
            }
        },
        methods: {
            goSearch() {
                if (this.keyword) {
                    this.storeOrderList = [];
                    this.currentPage = 1;
                    this.getStoreOrder();
                } else {
                    this.$refs.uToast.show({ message: '请输订单号、收货人手机号、收货人姓名', type: 'warning', })
                }
            },
            // 订单详情
            goOrderDetail(id) {
                this.$u.route({
                    url: '/pages/member/merchant/detail/detail',
                    params: {
                        orderId: id
                    }
                });
            },
            // 门店订单列表
            getStoreOrder() {
                let that = this;
                that.loadStatus = this.$globalConstVars.loadStatus.loading;
                let data = {
                    keyword: this.keyword,
                    page: that.currentPage,
                    limit: 10,
                    storeId: that.storeId
                }
                this.$u.api.getOrderPageByMerchantSearch(data).then(res => {
                    if (res.status) {
                        uni.stopPullDownRefresh();
                        that.storeOrderList = [...that.storeOrderList, ...res.data.pages];
                        that.lastPage = res.data.totalPages;
                        if (that.currentPage < res.data.totalPages) {
                            that.loadStatus = this.$globalConstVars.loadStatus.loadMore;
                        } else {
                            that.loadStatus = this.$globalConstVars.loadStatus.noMore;
                        }
                    } else {
                        this.uToast.show({
                            title: res.msg,
                            type: 'warning',
                        })
                    }
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import 'index.scss';
</style>
